
<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_tms_waybill_adjust_carriers_drivers')"
    :visible.sync="visible" custom-class="dialog_big" close-on-click-modal v-loading="loading" @close="hide">

    <el-form :label-width="$globalCss.formLabelWidth_default" :model="form" :rules="rules" ref="Form">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item :label="$t('label_actual_supply') + ':'">
            {{ item.carrierName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$tt('label_tms_task_number') + ':'">
            {{ item.waybillTaskCode }}
          </el-form-item>
        </el-col>
      </el-row>
      <ex_header_spiler :title="$tt('label_tms_common_carrier')"></ex_header_spiler>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :label="$t('label_adjustment_supply')" label-width="90px">
            <div style="display: flex;">
              <el-input v-model="filterData.carrierName" clearable></el-input>
              <el-button style="margin-left: 10px;" type="primary" @click="$refs.table_carrier.reload()">{{
                $t('label_query') }}</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="" prop="carrier" label-width="0">
        <el-radio-group v-model="form.carrier" class="w_fill">
          <ex_super_table_page v-bind="option_table" ref="table_carrier" style="height: 300px;"
            @row-click="rowClickCarrier" :autoLoad="false">
            <template v-slot:radio="{ row }">
              <el-radio style="margin-left: 10px;" :label="row" :key="row.carrierId">{{ "" }}</el-radio>
            </template>
          </ex_super_table_page>
        </el-radio-group>
      </el-form-item>

      <ex_header_spiler :title="$tt('label_tms_carrier_driver')"></ex_header_spiler>
      <div v-show="driverTableData.length > 0">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :label="$t('label_tms_driver')" label-width="80px">
              <div style="display: flex;">
                <el-input v-model="filterData.driverName" clearable></el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('label_tms_vehicle_license_number')" label-width="80px">
              <div style="display: flex;">
                <el-input v-model="filterData.vehicleNo" clearable></el-input>
                <el-button style="margin-left: 10px;" type="primary" @click="$refs.table_driver.reload()">{{
                  $t('label_query') }}</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" prop="driver" label-width="0">
          <el-radio-group v-model="form.driver" class="w_fill">
            <ex_super_table_page v-bind="option_driver" ref="table_driver" style="height: 300px;"
              @row-click="(row, column, event) => form.driver = row" :autoLoad="false">
              <template v-slot:radio="{ row }">
                <el-radio style="margin-left: 10px;" :label="row" :key="row.id">{{ "" }}</el-radio>
              </template>
            </ex_super_table_page>
          </el-radio-group>
        </el-form-item>
      </div>
      <div v-if="driverTableData.length === 0">
        <el-form-item :label="$t('label_tms_driver')" prop="driver.driverName" label-width="80px">
          <el-input v-model="form.driver.driverName" clearable />
        </el-form-item>
        <el-form-item :label="$t('label_tms_contact_number')" prop="driver.driverPhone" label-width="80px">
          <el-input v-model="form.driver.driverPhone" clearable />
        </el-form-item>
        <el-form-item :label="$t('label_tms_vehicle_license_number')" prop="driver.vehicleNo" label-width="80px">
          <el-input v-model="form.driver.vehicleNo" clearable />
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submitReady">{{ $tt('label_submit') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  data() {
    return {

      form: {
        carrier: null,
        driver: {
          driverName: '',
          driverPhone: '',
          vehicleNo: ''
        },

      },
      visible: false,

      loading: false,
      item: {},
      rules: {
        // 'driver.driverName':[ { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
        // 'driver.driverPhone':[ { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
        // 'driver.vehicleNo':[ { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
      },
      option_table: {
        table: {
          url: "/tms-api/waybill/TmsTaskInfoQueryRpc/pageCarrierInfo.json",
          urlParams: (params) => {
            return Object.assign({
              waybillTaskId: this.item.id,
              carrierName: this.filterData.carrierName
            }, params)
          },
          model: [
            { slot: "radio", },
            { key: 'carrierName', label: 'label_srm_supplier_name', 'min-width': 100, 'show-overflow-tooltip': true, },
            {
              key: 'prescription', label: '时效', 'min-width': 100, 'show-overflow-tooltip': true,
            },
            // {
            //   key: '', label: 'label_sign_contract', 'min-width': 100, 'show-overflow-tooltip': true,
            //   formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum")
            // },
            // { key: '', label: 'label_service_items', 'min-width': 100, 'show-overflow-tooltip': true, },

          ]
        }

      },
      option_driver: {
        table: {
          url: "/tms-api/waybill/TmsTaskInfoQueryRpc/pageCarrierVehicleInfo.json",
          urlParams: () => {
            return {
              carrierId: this.form.carrier.carrierId,
              driverName: this.filterData.driverName,
              vehicleNo: this.filterData.vehicleNo
            }
          },
          urlDataHandle: ({ data }) => {
            this.form.driver = {
              driverName: '',
              driverPhone: '',
              vehicleNo: ''
            }
            this.driverTableData = data.rows
            return this.driverTableData
          },
          model: [
            { slot: "radio", },
            { key: 'driverName', label: 'label_tms_driver', 'min-width': 100, 'show-overflow-tooltip': true, },
            {
              key: 'vehicleNo', label: 'label_tms_vehicle_license_number', 'min-width': 100, 'show-overflow-tooltip': true,
              // formatter: (r, c, v, i) => this.$enumShow(v, "TransportSectionEnum")
            },
            {
              key: 'vehicleType', label: 'label_tms_vehicle_vehicle_model', 'min-width': 100, 'show-overflow-tooltip': true
            },
            {
              key: 'volume', label: '车辆内空', 'min-width': 100, 'show-overflow-tooltip': true,
              // formatter: (r, c, v, i) => this.$enumShow(v, "LogisticsProductsTypeEnum")
            },
            {
              key: 'loadWeight', label: 'label_tms_vehicle_bearing_capacity_1', 'min-width': 100, 'show-overflow-tooltip': true,

            },
            {
              key: 'driverWorkStatusDesc', label: 'label_tms_vehicle_vehicle_state', 'min-width': 100, 'show-overflow-tooltip': true
            },

          ]
        }

      },
      filterData: {
        carrierName: '',
        driverName: '',
        vehicleNo: ''
      },
      driverTableData: [],
    }
  },
  computed: {



  },
  methods: {


    show(data) {
      this.visible = true
      this.form.carrier = {
        carrierId: data.carrierId,
        carrierName: data.carrierName,
        prescription: data.prescription
      }

      this.$nextTick(() => {
        this.$refs.table_carrier.reload()
      })

      if (data.carrierId) {
        this.$nextTick(() => {
          this.$refs.table_driver.reload()
        })
      }

      this.form.driver = {
        driverName: '',
        driverPhone: '',
        vehicleNo: ''
      }
      this.item = data
    },
    rowClickCarrier(row, column, event) {
      this.form.carrier = row
      this.filterData.driverName = ''
      this.filterData.vehicleNo = ''
      this.form.driver = {
        driverName: '',
        driverPhone: '',
        vehicleNo: ''
      }
      this.$refs.table_driver.reload()
    },
    hide() {
      this.visible = false
      this.form.carrier = null
      this.driverTableData = []
    },
    submitReady() {
      // if (!this.form.carrier) {
      //   return this.$message.error(this.$tt('label_tms_not_sel_carrier'))
      // }

      let text = this.$tt('label_tms_adjust_carrier', { carrier: this.form.carrier.carrierName })

      if (this.form.driver.driverName) {
        text += "，" + this.$tt('label_tms_adjust_driver', { driverName: this.form.driver.driverName })
      }

      this.$refs['Form'].validate((valid) => {
        if (valid) {
          // if (!this.form.driver.driverName) {
          //   return this.$message.error(this.$tt('label_tms_not_sel_driver'))
          // }
          this.$confirm(text, this.$tt('label_tip'), {
            type: 'warning'
          }).then(() => {
            this.submit();
          })
        } else {
          this.$message.error(this.$tt('form_validate_error'))
          return false;
        }
      });

    },
    submit() {

      let data = {
        id: this.item.id,
        version: this.item.version,
      }
      if (this.form.carrier) {
        Object.assign(data, {
          carrierId: this.form.carrier.carrierId,	//long 	预分配承运商id
          carrierName: this.form.carrier.carrierName,//	string 	预分配承运商名称
          prescription: this.form.carrier.prescription
        })

      }
      if (this.form.driver) {
        Object.assign(data, {
          driverId: this.form.driver.driverId,//	long 	预分配司机id
          driverName: this.form.driver.driverName,//		string 	预分配司机名称
          driverPhone: this.form.driver.driverPhone,//		string 	司机电话
          vehicleId: this.form.driver.id,//	long 	车辆id
          vehicleNo: this.form.driver.vehicleNo,//
        })
      }

      this.$ajax({
        url: "/tms-api/waybill/TmsTaskInfoOperationRpc/adjustCarrierAndDriver.json",
        method: 'post', type: 'json',
        loading: true,
        data,
        success: (res) => {
          this.$message.success(this.$tt('tip_submit_success'))
          this.hide()
          this.$emit('submitSuccess')
        },
      })


    },

  }
}
</script>
